<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/plugins/select2.min.js"></script>
  <script src="../../scripts/plugins/Sortable.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="data-resource.html"><i class="icon-explore"></i><span>资源状态概览</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resource.html">资源概览</a></li>
        </ul>
      </li>

      <li> <a href="data-traffic.html"><i class="icon-db-search"></i><span>流量分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-traffic.html">数据库流量</a></li>
          <li> <a href="data-traffic-ftp.html">FTP流量</a></li>
        </ul>
      </li>

      <li class="active"> <a href="data-flow.html"><i class="icon-db-search"></i><span>流向分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-flow.html">流向分析</a></li>
          <li  class="active"><a  href="data-client.html">客户端管理</a></li>
          <li><a href="data-threshold.html">风险阀值配置</a></li>
        </ul>
      </li>

      <li> <a href="data-laws.html"><i class="icon-db-search"></i><span>使用规律分析</span></a><em class="open"></em>
        <ul>
          <li><a href="data-overview.html">概况</a></li>
          <li> <a href="data-laws.html">资源使用规律</a></li>
          <li><a href="data-userlaw.html">用户行为规律</a></li>
        </ul>
      </li>

      <li> <a href="data-riskevent..html"><i class="icon-db-search"></i><span>风险事件</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-riskevent-charts.html">风险概况</a></li>
          <li> <a href="data-riskevent.html">事件查看</a></li>

        </ul>
      </li>

      <li> <a href="data-resourceconfig.html"><i class="icon-notifications-on"></i><span>数据资源管理</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resourceconfig.html">数据资源配置</a></li>
          <li><a href="data-ipconfig.html">参数配置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>客户端管理</h2></div>
    <div class="sys-content">
      <div class="panel">
        <div class="panel-body" id="datasource">
          <div class="col-6">

            <!-- <div class="source-box">
              <div class="source-item">
                <p><strong>应用系统</strong> <em class="badge badge-gray">3</em></p>
                <ul>
                  <li><span class="short">官网门户</span><strong title="IP">212.172.74.115，212.172.74.116</strong></li>
                  <li><span class="short">数据开放平台</span><strong title="IP">212.172.74.119</strong></li>
                  <li><span class="short">电子政务</span><strong title="IP">212.172.74.214，212.172.74.115</strong></li>
                </ul>
              </div>
            </div>


            <div class="source-box">
              <div class="source-item">
                <p><strong>数据交换服务</strong> <em class="badge badge-gray">2</em></p>
                <ul>
                  <li><span>DCI数据交换系统</span></li>
                  <li><span>FEB数据交换服务</span></li>
                </ul>
              </div>
            </div> -->

            <div class="source-box" style="width:100%">
              <div class="source-item">
                <p><strong>数据库直连终端（合法）</strong> <em class="badge badge-gray">2</em></p>
                <ul  id="advanced-1">
                  <li><span>122.25.78.234<strong>- 办公厅301-1终端</strong></span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></em></li>
                  <li><span>122.25.78.235<strong>- 办公厅301-2终端</strong></span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></em></li>
                </ul>
              </div>
            </div>
          </div>


          <div class="col-6">
            <div class="source-box" style="width:100%">
              <div class="source-item">
                <p><strong>数据库直连终端（未知）</strong> <em class="badge badge-danger">4</em></p>
                <ul  id="advanced-2">
                  <li><span class="new"><i class="icon-notifications-on" title="不再提醒"></i>221.192.202.17 </span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span class="new"><i class="icon-notifications-on" title="不再提醒"></i>221.192.202.17 </span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span class="new"><i class="icon-notifications-on" title="不再提醒"></i>221.192.202.17 </span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span class="new"><i class="icon-notifications-on" title="不再提醒"></i>21.19.22.171</span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span>21.19.22.123</span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span>21.19.22.16</span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span>21.19.22.18</span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span>21.19.22.171</span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                  <li><span>221.19.22.171</span><em class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a></em></li>
                </ul>
              </div>
            </div>
          </div>

          <div class="tipinfo"><i class="icon-infomation"></i> 采集终端和应用门户的管理涉及IP数量较多，随意更改会对系统其他模块造成影响和风险，现仅对平台超级管理员开发，若要配置，请前往：<a href="http://xxxx.xxxx.com/xxxx">http://xxxx.xxxx.com/xxxx</a></div>
        </div>
        <!--panel-body end-->
      </div>
    </div>
  </div>



  <div class="dialog dialog-sm" id="edit">
    <div class="dialog-win">
      <div class="dialog-head"><span>修改终端</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
      <div class="dialog-body">
        <ul class="inline-list col4">
          <li>IP 地址：172.199.25.110</li>
        </ul>
        <div class="form-box">
          <div class="form-item">
            <div class="form-title">名称：</div>
            <div class="form-content"><input class="input" id="e22" type="text"></div>
          </div>
          <div class="form-item">
            <div class="form-title">备注：</div>
            <div class="form-content"><textarea class="input"></textarea></div>
          </div>
        </div>
      </div>
      <div class="dialog-foot"><button class="btn" id="save">确认</button><button id="cancel" class="btn btn-minor">取消</button></div>
    </div>
  </div>
  <!--dialog end-->
</body>
</html>
<script>
  $(document).ready(function(){
    $(".source-item").on("click", "strong",function() {
     if($(this).parents(".source-item").hasClass('open')){
      $(this).parents(".source-item").removeClass('open');
      $(this).parent().next("ul").show();
    }
    else{
      $(this).parents(".source-item").addClass('open');
      $(this).parent().next("ul").hide();
    }
  })

    $(".source-tit").on("click","a",function(){
      $("#add").show();
    })

    $(".source-item p ").on("click","a:eq(1)",function(){
      $("#add").show();
    })
    $(".source-item li ").on("click","a:eq(0)",function(){
      $("#e22").val($(this).parents("dd").find("span").text())
      $("#edit").show();
    })

    $(".source-item li ").on("click","a[title='修改']",function(){
      $("#edit").show();
    })

    $(".icon-notifications-on").on('click',  function() {
      $(this).parents().removeClass('new').end().remove();
    });



        $("#createbtn").on("click",function(){
          $("#create").slideToggle(200);
        })


        $(".dialog .close,#cancel").on("click",function(){
          $(".dialog").hide();
        })
        $.fn.zTree.init($("#dblist"), setting, zNodes);

        $(".field").on("click", "button", function() {
          $(this).next("ul").slideToggle(200);
        })

        $(".field").on("click", "li", function() {
          if($(this).hasClass('checked')) {

            if($(this).index()<3){
              alert("不能删除有数据的资源类型");
              return
            }

            $(".col-9 .source-box:eq("+$(this).index()+")").hide();
            $(this).removeClass('checked');
          }else{
           $(".col-9 .source-box:eq("+$(this).index()+")").show();
           $(this).addClass('checked');
         }

       })

      })

    var setting = {
      check: {
        enable: true
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };

    var zNodes =[
    { id:1, pId:0, name:"HBASE", open:true},
    { id:11, pId:1, name:"T-USERINFO"},
    { id:12, pId:1, name:"T-LOG"},
    { id:13, pId:1, name:"T-LOGIN"},
    { id:14, pId:1, name:"T-IP-INFO"},

    { id:2, pId:0, name:"ORACLE"},
    { id:21, pId:2, name:"T-DB-NEW"},
    { id:22, pId:2, name:"T-DB-2016"},
    { id:23, pId:2, name:"T-DB-INFO2016-TEMP"},

    { id:3, pId:0, name:"DB-WASKL"},
    { id:31, pId:3, name:"T-SQMSL"},
    { id:32, pId:3, name:"T-SMQXH-JSK"},
    { id:33, pId:3, name:"T-BMSL-ZSJD"},

    { id:4, pId:0, name:"DB-ORACL-DJS"},
    { id:41, pId:4, name:"T-SKA"},
    { id:42, pId:4, name:"T-ZJSL2"},
    { id:43, pId:4, name:"T-Z,MWNZ"},
    { id:44, pId:4, name:"T-MBMSA"},
    ];

// var el = document.getElementById('datasource');
// var sortable = Sortable.create(el);

(function () {
  'use strict';

  var byId = function (id) { return document.getElementById(id); },

  loadScripts = function (desc, callback) {
    var deps = [], key, idx = 0;

    for (key in desc) {
      deps.push(key);
    }

    (function _next() {
      var pid,
      name = deps[idx],
      script = document.createElement('script');

      script.type = 'text/javascript';
      script.src = desc[deps[idx]];

      pid = setInterval(function () {
        if (window[name]) {
          clearTimeout(pid);

          deps[idx++] = window[name];

          if (deps[idx]) {
            _next();
          } else {
            callback.apply(null, deps);
          }
        }
      }, 30);

      document.getElementsByTagName('head')[0].appendChild(script);
      alert()
    })()
  },

  console = window.console;
  [{
    name: 'advanced',
    pull: true,
    put: true
  },
  {
    name: 'advanced',
    pull: true,
    put: true
  }].forEach(function (groupOpts, i) {
    Sortable.create(byId('advanced-' + (i + 1)), {
      // sort: (i != 1),
      group: groupOpts,
      animation: 150,
      onEnd:function (evet) {
       console.log(evet)
       // alert(evet.item.firstChild.className)
       var obj=evet.item.firstChild;
       obj.removeAttribute('class');
       obj.removeChild(obj.children[0]);
     }
   });
  });
})();


</script>